<template>
	<view>
		<view class="img-a">
		</view>
		<view class="login-view" style="">
			<view class="t-login" v-if="!registerFlag">
				<form class="cl">
					<view class="t-a">
						<text class="txt">账号</text>
						<input type="number" name="phone" placeholder="请输入您的账号" maxlength="11" v-model="phone" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input password type="password" name="code" maxlength="18" placeholder="请输入您的密码"
							v-model="pwd" />
					</view>
					<view class="" style="display: flex; justify-content: space-around;">
						<button @click="goRegister()" style="background-color: #67c23a;">去 注 册</button>
						<button @tap="verify()">登 录</button>
					</view>
				</form>
				<view class="t-f"><text>——— 忘记密码，请联系管理员 ———</text></view>
			</view>
			<view class="t-login" v-else>
				<form class="cl">
					<view class="t-a">
						<text class="txt">账号</text>
						<input type="number" name="username" placeholder="请输入您的账号" maxlength="11" v-model="username" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input password type="password" name="password" maxlength="18" placeholder="请输入您的密码"
							v-model="password" />
					</view>
					<view class="t-a">
						<text class="txt">确认密码</text>
						<input password type="password" name="repassword" maxlength="18" placeholder="请输入您的密码"
							v-model="repassword" />
					</view>
					<view class="" style="display: flex; justify-content: space-around;">
						<button @click="goRegister()">去 登 录</button>
						<button @tap="verifyRegister()" style="background-color: #67c23a;">注 册</button>
					</view>
				</form>
				<view class="t-f"><text>——— 忘记密码，请联系管理员 ———</text></view>
			</view>
		</view>
		<!-- 		<view class="login-view" style="">
			<view class="t-login">
				<u-icon name="arrow-left" color="#000000" custom-style="margin-left:-20px;margin-top:-20px" @click="goBack"></u-icon>
				<view class="t-b-wx">
					您好，
					<br />
					欢迎来到 中兴测绘
				</view>
				<button open-type="getPhoneNumber" @getphonenumber="wxGetPhone">授权登录</button>
				<view style="text-align: center;margin-top: 30rpx;">
					<view class="text-gray">授权信息仅用于小程序登录</view>
					<view class="text-gray">头像和昵称仅用于测试数功能展示</view>
				</view>
			</view>
		</view> -->
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		updateClientId
	} from '@/api/user.js';
	import {
		useAuthStore
	} from '@/store/index';
	import {
		getRouters,
		getInfo,
		login,
		register,
		wxLogin
	} from '@/api/login.js';
	import env from '@/env'

	const authStore = useAuthStore();
	// 定义响应式数据
	const phone = ref('');
	const pwd = ref('');
	const registerFlag = ref(false)
	// 定义响应式数据
	const username = ref('');
	const password = ref('');
	const repassword = ref('');

	// 验证登录信息
	const verify = () => {
		if (!phone.value) {
			uni.showToast({
				title: '请输入您的账号',
				icon: 'none'
			});
			return;
		}
		// if (!uni.$u.test.mobile(phone.value)) {
		// 	uni.showToast({
		// 		title: '请输入正确账号',
		// 		icon: 'none'
		// 	});
		// 	return;
		// }
		if (!pwd.value) {
			uni.showToast({
				title: '请输入您的密码',
				icon: 'none'
			});
			return;
		}
		submit();
	};

	// 提交登录信息
	const submit = async () => {
		try {
			const loginData = {
				username: phone.value,
				password: pwd.value,
				clientId: env.VITE_APP_CLIENT_ID,
				tenantId: "000000",
				grantType: "password"
			};
			authStore.Logind(loginData)
		} catch (error) {
			console.log(error, 'error');
		}
	};


	const goRegister = () => {
		registerFlag.value = !registerFlag.value
		phone.value = ''
		pwd.value = ''
		username.value = ''
		password.value = ''
		repassword.value = ''
	}

	const verifyRegister = () => {
		if (!username.value) {
			uni.showToast({
				title: '请输入您的账号',
				icon: 'none'
			});
			return;
		}
		// if (!uni.$u.test.mobile(username.value)) {
		// 	uni.showToast({
		// 		title: '请输入正确账号',
		// 		icon: 'none'
		// 	});
		// 	return;
		// }
		if (!password.value) {
			uni.showToast({
				title: '请输入您的密码',
				icon: 'none'
			});
			return;
		}
		if (!repassword.value) {
			uni.showToast({
				title: '请确认您的密码',
				icon: 'none'
			});
			return;
		}
		if (password.value != repassword.value) {
			uni.showToast({
				title: '两次密码输入不一致',
				icon: 'none'
			});
			return;
		}
		registerSub();
	}

	const registerSub = async () => {
		try {
			const loginData = {
				username: username.value,
				password: password.value,
				clientId: env.VITE_APP_CLIENT_ID,
				tenantId: "000000",
				userType: 'xcx_user',
				grantType: "xcx"
			};
			const {
				data
			} = await register(loginData);
			if (data.code === 200) {
				setTimeout(() => {
					uni.showToast({
						title: '注册成功',
						icon: 'none'
					});
					registerFlag.value = !registerFlag.value
				}, 1000)
			}
			if (data.code !== 200) {
				uni.showToast({
					title: data.msg,
					icon: 'none'
				});
				return;
			}
		} catch (error) {
			console.log(error, 'error');
		}
	}

	// 获取微信手机号并登录
	const wxGetPhone = (e) => {
		uni.login({
			provider: 'weixin',
			success: (res) => {
				if (!e.detail.code) {
					uni.showToast({
						title: '获取手机号失败',
						icon: 'none'
					});
					return;
				}
				authStore.wxLogind(e.detail.code, res.code);
			},
		});
	};


	// 返回上一个页面
	const goBack = () => {
		uni.switchTab({
			url: '/pages/home/index'
		});
	};

	// 页面加载完成后执行
	onMounted(() => {});
</script>
<style>
	.txt {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.img-a {
		/* width: 100%;
	height: 550rpx; */
		background-image: url("https://www.zxsl.zxmap.cn/zxch-app/2025/07/01/0a610ed8af214e65a62516ad2f866523.png");
		/* background-image: url("https://www.zxsl.zxmap.cn/zxch-app/2025/04/12/5340bccdd11b4904900fc3c5f025bea2.png"); */
		background-size: 100% auto;
		height: 320rpx;
		position: relative;
		z-index: 1;
	}

	.reg {
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: bold;
		background: #f5f6fa;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}

	.login-view {
		width: 100%;
		z-index: 2;
		/* height: calc(100vh - 300rpx); */
		position: relative;
		margin-top: -60rpx;
		background-color: #f5f7fb;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 0px 10px #f5f7fb;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		padding-top: 80rpx;
	}

	.t-login button {
		font-size: 28rpx;
		background: #2796f2;
		color: #fff;
		/* height: 90rpx; */
		/* line-height: 90rpx; */
		border-radius: 50rpx;
		font-weight: bold;
		padding: 5rpx 40rpx;
	}

	.t-login input {
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		border-bottom: 1px solid #e9e9e9;
		font-size: 28rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-b {
		text-align: left;
		font-size: 42rpx;
		color: #ffffff;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
	}

	.t-b-wx {
		text-align: left;
		font-size: 42rpx;
		color: #222222;
		padding: 30rpx 0 30rpx 70rpx;
		font-weight: bold;
		line-height: 70rpx;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 150rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #aeaeae;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	.agreement {
		display: flex;
		flex-direction: row;
		/* justify-content: center; */
		align-items: center;
		font-size: 30rpx;
		/* margin-top: 10rpx; */
		margin-bottom: 80rpx;
		color: #909399;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}
</style>